import type { Directive } from "vue";
const Observer: Directive = {
    mounted(el, binding) {
        const callback = binding.value;
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    callback(); // 触发加载更多数据的函数
                    observer.unobserve(el); // 加载后停止观察此元素
                }
            });
        }, { threshold: 1.0 });
        el.__vueIntersectionObserver__ = observer
        observer.observe(el);

    },
    unmounted(el) {
        // 在指令卸载时移除观察者，以防内存泄漏
        const observer = el.__vueIntersectionObserver__;
        if (observer) {
            observer.unobserve(el);
            observer.disconnect();
            delete el.__vueIntersectionObserver__;
        }
    },
}


export default Observer